<template>
  <div id="">
    <div class="search">
      <div class="input">
        <p><label>活动名称：</label><span>{{ $route.query.name }}</span>
        </p>
      </div>
    </div>
    <div class="add">
      <el-button type="primary" @click="back">返回上一级</el-button>
      <el-button type="primary" @click="add">添加商品</el-button>
    </div>
    <tableVue v-loading="pageData.loading" :list="list" :state="false" :total="total" @sizeChange="handSize">
      <slot>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row,1)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              class="del"
              @click="del(scope.row,2)">删除</el-button>
          </template>
        </el-table-column>
      </slot>
    </tableVue>
    <el-dialog :visible.sync="dialog" title="添加商品">
      <div class="">
        <el-form ref="ruleForm" :model="pageData" label-width="200px" class="demo-ruleForm">
          <el-form-item label="是否显示在首页" prop="seoKey">
            <el-select v-model="pageData.isIndex" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in Online"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="位置" prop="locationNum">
            <el-input v-model="pageData.locationNum" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="价格处理方式" prop="seoKey">
            <el-select v-model="pageData.priceReduceType" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in disposeType"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item v-if="pageData.priceReduceType == '2'" label="之定义价格" prop="promotePrice">
            <el-input v-model="pageData.promotePrice" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="商品图片" prop="promotePrice">
            <el-upload
              ref="upload"
              :limit="1"
              :action="uploadingImg"
              :on-change="changeImgFile"
              :http-request="custom"
              :file-list="fileList"
              :on-exceed="exceed"
              :auto-upload="false"
              class="upload-demo"
              list-type="picture">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="custom">上传到服务器</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="选取商品" prop="promotePrice">
            <el-button type="primary" @click="innerVisible = true">选取商品</el-button>
          </el-form-item>
          <el-form-item label="商品名称" prop="promotePrice">
            {{ this.goodsName }}
          </el-form-item>
          <el-form-item class="confirm">
            <el-button v-if="btnState == '1'" type="primary" @click="upForm('post')">提交</el-button>
            <el-button v-if="btnState == '2'" type="primary" @click="upForm('put')">更新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog
        :visible.sync="innerVisible"
        width="1500px"
        title="选取商品"
        append-to-body>
        <!-- v-loading="pageData.loading" -->
        <div class="tb">
          <tableVue
            :list="goodsList"
            :state="false"
            :radio-shwo="true"
            :total="goodsTotal"
            @changeData="selectionVal"
            @sizeChange="goodsHandSize"/>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  activityGoodsList,
  addActivityGoods,
  delActivityGoods
} from '@/api/activity/activity'
import {
  upLoadingImg
} from '@/api/shoppingCentre/shoppingCentre'
import {
  commodityList
} from '@/api/shoppingCentre/productCentre'
export default {
  components: {
    tableVue,
    dialogVue
  },
  data() {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted() {
    this.getactivityList({ activityId: this.$route.query.id })
    this.getGoodsList({ size: '10', goodsStatus: '2', activityId: this.$route.query.id })
  },
  methods: {
    getGoodsList(data) {
      commodityList(data).then(res => {
        if (res.data.code == 'OK') {
          this.pageData.loading = false
          this.goodsList.tbody = res.data.data.records.map(item => {
            item.gmtCreate = this.switchTime(item.gmtCreate)
            item.gmtUpdate = this.switchTime(item.gmtUpdate)
            switch (item.goodsStatus) {
              case '1' : item.goodsStatus = '待上架'
                break
              case '2': item.goodsStatus = '已上架'
                break
              case '3': item.goodsStatus = '已预订'
                break
              case '4': item.goodsStatus = '已出售'
                break
              default:
            }
            return item
          })
          this.goodsTotal = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getactivityList(data) {
      this.pageData.loading = true
      activityGoodsList(data).then(res => {
        if (res.data.code == 'OK') {
          console.log(res);
          this.pageData.loading = false
          this.total = res.data.data.total
          this.list.tbody = res.data.data.records.map(item => {
            item.gmtCreate = this.switchTime(item.gmtCreate)
            item.gmtUpdate = this.switchTime(item.gmtUpdate)
            item.activityType = item.activityType == '1' ? '限时抢购' : '其他'
            item.isIndex = item.isIndex == 'N' ? '否' : '是'
            return item
          })
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    upForm(method) {
      var data = {
        activityGoodsId: this.pageData.activityGoodsId,
        activityId: this.$route.query.id,
        goodsId: this.pageData.goodsId,
        isIndex: this.pageData.isIndex = this.pageData.isIndex == '是' ? 'Y' : 'N',
        goodsPicture: this.pageData.goodsPicture,
        locationNum: this.pageData.locationNum,
        priceReduceType: this.pageData.priceReduceType,
        promotePrice: this.pageData.promotePrice
      }
      if (!data.goodsPicture) {
        this.$message.error('请上商品传图片到服务器')
        return false
      }
      addActivityGoods(data, method).then(res => {
        if (res.data.code == 'OK') {
          if (method == 'post') {
            this.$message.success('添加成功')
          } else {
            this.$message.success('修改成功')
          }
          this.getactivityList({ activityId: this.$route.query.id })
          this.dialog = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleEdit(item) {
      this.fileList = []
      this.fileList.push({
        name: '',
        url: item.goodsPicture
      })
      this.dialog = true
      this.pageData.goodsPicture = item.goodsPicture
      this.pageData.activityGoodsId = item.activityGoodsId
      this.pageData.activityId = item.activityId
      this.pageData.goodsId = item.goodsId
      this.pageData.isIndex = item.isIndex
      this.pageData.locationNum = item.locationNum
      this.pageData.priceReduceType = item.priceReduceType
      this.pageData.promotePrice = item.promotePrice
      this.btnState = '2'
      this.goodsName = item.goodsName
    },
    add() {
      this.dialog = true
      this.btnState = '1'
      this.pageData = {}
      this.fileList = []
      this.goodsName = ''
    },
    handSize() {},
    search() {},
    custom(file) { // 单张图片上传
      this.$message({
        showClose: true,
        message: '图片正常在上传请稍后.......',
        type: 'warning'
      })
      var data = {
        base64Str: this.imgData.base64Str,
        fileOriginName: this.imgData.fileOriginName,
        fileType: this.imgData.fileType,
        id: this.imgData.id
      }
      upLoadingImg(data).then(res => {
        if (res.data.code == 'OK') {
          this.$message.success('上传图片成功')
          this.pageData.goodsPicture = res.data.data.fileURL
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    changeImgFile(file) { // 拿到单张图片的地址
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = () => {
        this.imgData.base64Str = reader.result.split(',')[1]
        this.imgData.id = file.uid
        this.imgData.fileOriginName = file.name
        this.imgData.fileType = file.name.split('.')[1]
      }
    },
    exceed(files, fileList) {
      this.$message.error('只能传一张图片')
    },
    selectionVal(val) {
      this.pageData.goodsId = val.goodsId
      this.goodsName = val.goodsName
      this.innerVisible = false
    },
    goodsHandSize(val) {
      this.getGoodsList({ size: '10', current: val, goodsStatus: '2' })
    },
    back() {
      this.$router.push({
        name: 'limitedTime'
      })
    },
    del(val) {
      this.delMessage(() => {
        const arr = []
        arr.push(val.activityGoodsId)
        delActivityGoods(arr).then(res => {
          if (res.data.message == '成功') {
            this.$message.success('删除成功')
            this.getactivityList({ activityId: this.$route.query.id })
          } else {
            this.$message.error(res.data.message)
          }
        })
      })
    }
  }
}
</script>
<style  scoped>
  @import "../../../../styles/common.css";
  .tb {
    padding: 70px 26px !important;
  }
</style>
